<template>
  <div class="myCollBox">
    <div class="tabsBox">
      <span :class="selTab===1?'selTabs':''" @click="tabsClick(1)">课堂（21）</span>
      <span :class="selTab===2?'selTabs':''" @click="tabsClick(2)">回答（32）</span>
    </div>
    <div class="w1200" v-if="selTab===1">
      <div class="indexList2">
        <div class="indexItem2" v-for="(item,index) in dataJson2" :key="index" @click="spxqClick">
          <div class="imgbox2">
            <img :src="item.img" alt="" srcset="" class="indexImg"/>
            <span class="time">{{item.time}}</span>
          </div>
          <div class="indexCon">
            <h3>{{item.title}}</h3>
            <div class="indexText3" v-for="tag in item.tags" :key="tag">{{tag}}</div>
            <div class="betweens">
              <div class="col4">收藏于 {{item.click}}</div>
              <div class="collection" @click.stop="()=>{item.iscollection=!item.iscollection}">
                <img :src="item.iscollection? require('../../assets/img/collection1.png'):require('../../assets/img/collection2.png')" style="width:20px" alt="">
                <span :style="{color:item.iscollection?'#AAAAAA':'#f59a23'}">{{item.iscollection?item.collection:item.collection+1}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="500">
        </el-pagination>
      </div>
    </div>
    <div class="questionAnswerMain" v-else>
      <div class="questionAnswerMainLeft">
        <div class="questionAnswerContent">
          <div class="questionAnswerList" v-for="(item,index) in questionAnswerList" :key="index">
            <div class="questionAnswerTitle">
              <i class="el-icon-question" style="color:#26b000;font-size:20px"></i>
              <span>{{item.title}}</span>
            </div>
            <div class="titleInformation">
              <div class="titleInformationTitle">
                <span v-show="item.levelExamination">{{item.levelExamination}}</span>
                <span v-show="item.grade">{{item.grade}}</span>
                <span v-show="item.professionalTitleCertificate">{{item.professionalTitleCertificate}}</span>
              </div>
              <div class="statistics">
                <span>{{item.dateTime}}</span>
                <span>{{item.numberOfReaders}}人阅读</span>
                <span>{{item.followNumber}}人关注</span>
              </div>
            </div>
            <div class="expertInformation">
              <div class="expertAvatar">
                <img :src="item.headPortrait" alt="">
              </div>
              <div class="expertIntroduction">
                <div class="expertName">
                  <span>{{item.expertName}}</span>
                  <span>{{item.detailed}}</span>
                </div>
              </div>
            </div>
            <div class="favoriteLikes">
              <div class="favoriteLikesGroup">
                <div class="collection" @click.stop="()=>{item.iscollection=!item.iscollection}">
                  <img :src="item.iscollection? require('../../assets/img/collection1.png'):require('../../assets/img/collection2.png')" style="width:20px" alt="">
                  <span :style="{color:item.iscollection?'#AAAAAA':'#f59a23'}">{{item.iscollection?item.collection:item.collection+1}}</span>
                </div>
                <div class="likesNumber" @click.stop="()=>{item.islikesNumber=!item.islikesNumber}">
                  <img :src="item.islikesNumber?require('../../assets/img/fabulous1.png'):require('../../assets/img/fabulous2.png')" style="width:20px" alt="">
                  <span :style="{color:item.islikesNumber?'#AAAAAA':'#f59a23'}">{{item.islikesNumber?item.likesNumber:item.likesNumber+1}}</span>
                </div>
              </div>
              <div class="more">
                <el-button type="text">展开</el-button>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="500">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="questionAnswerMainRight" @click="consultImmediately">
        <div class="questionAnswerMainRightContent">
          <div class="consultImmediatelyButton">
          </div>
          <img src="../../assets/img/consultImmediately.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { dataJson2, questionAnswerList } from './data.js'
export default {
  data () {
    return {
      selTab: 1,
      dataJson2,
      questionAnswerList
    }
  },
  mounted () {
    window.scrollTo(0, 0)
  },

  methods: {
    // 切换tab
    tabsClick (num) {
      this.selTab = num
    },
    // 点击课程
    spxqClick () {
      this.$router.push({
        name: 'classroomview'
      })
    },
    consultImmediately () {
      this.$router.push({ name: 'consultingService' })
    }
  }
}
</script>
<style lang="scss" src="./index.scss" scoped></style>
